<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/public.css">
    <link href="js/dplayer/dplayer.min.css" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <script src="js/dplayer/dplayer.min.js"></script>
    <script src="js/dplayer/hls.min.js"></script>
    <script src="js/template/template-web.js"></script>
    <script src="js/header.js"></script>
    <script src="js/commit.js"></script>
</head>
<body>
<div class="video_back">
    <div class="video_background">
        <div class="video_wi">

            <div class="video_box_c clearfix">
                <div class="video_box_f">
                    <div class="video_box" id="video_box" style="width:880px;height:550px;float:left;"></div>
                    <div id="my_camera"></div>
                </div>
                <div class="playList" id="playList">
                    <h2>播放列表</h2>
                    <div id="warp" style="">
                        <div style="" id="box">
                            <script type="text/html" id="videoListTpl">
                                {{each res as item index}}
                                <dl class="" data_id="{{item.id}}">
                                    <a href="javascript:;" title="{{item.name}}">
                                        <dt>
                                            <img src="./images/void.jpg" width="120" height="68" title="" alt="">
                                            <!-- <p><span class="playTime">00:35</span></p> -->
                                        </dt>
                                        <dd>
                                            <p>{{item.name}}</p>
                                            <!--<span class="playNum"><i class="icon"></i>{{item.description}}</span>-->
                                        </dd>
                                    </a>
                                </dl>
                                {{/each}}
                            </script>
                        </div>
                        <div id="scrollBar" onselectstart="return false"></div>
                    </div>
                    
                </div>
            </div>
            <div class="infoBox">
                <h1>视频的：name</h1>
                <p>视频简介：视频的description</p>
            </div>
            
        </div>
    </div>
</div>
<!-- footer -->
<div class="index_footer_div_3" id="footer"></div>
<script>$("#footer").load("./footer.html");</script>

<script src="js/webcam/webcam.min.js"></script>
<script src="js/scroolBar/scrollBar.js"></script>
<script src="js/videoinfo.js"></script>
<script language="JavaScript">
    Webcam.set({
        width: 880,
        height: 550,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
    Webcam.attach( '#my_camera' );

    $('#my_camera div').append('<span class="take_span">点击拍照</span>')
    $('.take_span').removeClass('take_span_agein').html('点击拍照')

    $('body').on('click' , '.take_span' , function(){
        Webcam.snap( function(data_uri) {
            // display results in page
            $('#my_camera div').append('<em class="over_img"><img class="take_img" src="'+data_uri+'" width="" height="344"/></em>');
            $('.take_span').addClass('take_span_agein').html('重新拍照')

            HOME.ajaxHOMEFn({
            url: HOME.baseUrl.discern,
            type: 'POST',
            dataType: 'json',
            data: {
                videoId: $('#video_box').attr('data_id'),
                face_img : data_uri.substring(23, data_uri.length)
            }
            }, function (res) {
                console.log(res)
            });

        });

        
    })

    $('body').on('click' , '.take_span_agein' , function(){
        // display results in page
        $('#my_camera div em').remove();
        $('.take_span').removeClass('take_span_agein').html('点击拍照')
        
    })
</script>
</body>
</html>